<template>
    <div ref="record"> 
        <div class="m-header-r">
            <h1 class="m-h-text">开奖记录</h1>
        </div>
        <mescroll-vue ref="mescroll" :up="mescrollUp" @init="mescrollInit"> 
            <no-data v-if="noData"></no-data>
            <div class="flex-box flex-ac flex-pj bor-b-g record-pd" v-for="(item, i) in recordList" @click="openDetails(item)" :key="i">
                <div>
                    <div class="tx-s-14 tx-c-222">{{ item.type }}</div>
                    <div class="tx-s-12 tx-c-666 mar-tb">第{{ item.issue }}期 | 开奖时间:{{ item.openDate }}</div>
                    <div class="flex-box" v-if="item.ename == 'xglhc'||item.ename == 'bflhc'">
                        <div class="circle-min" :class="[ colorCir[num.color] ]" v-for="(num, i) in item.haoma" :key="i">{{ num.number }}</div>
                    </div>
                    <div class="flex-box" v-else>
                        <div class="circle-min circle-R" v-for="(num, i) in item.number.split(',')" :key="i">{{ num }}</div>
                    </div>
                </div>
                <div class="arrow_right"></div>
            </div> 
        </mescroll-vue>
    </div>
</template>
<script type="text/ecmascript-6">
import 'common/css/user.css'
import 'common/css/lottery.css'
import MescrollVue from 'mescroll.js/mescroll.vue'
import NoData from '../components/noData'
import { isEmptyObject } from '../common/js/common'
import { isDefine } from '../common/js/common'
import { newRecord } from '../common/js/axiosUtil' 
export default {
    data () {
        return {
            recordList : [], // 中奖纪录列表
            colorCir : {
                R : 'circle-R', B : 'circle-B', G : 'circle-G'
            },
            noData : false,
            mescroll: null, // mescroll实例对象
            //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
            mescrollUp: { // 上拉加载的配置.
                callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
                htmlNodata: '<p class="upwarp-nodata">-- END --</p>',
                noMoreSize: 5 //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
            }
        }
    },
    created () {
        this.getRecordList()
    }, 
    methods: {
        getRecordList(){ 
            let params = new URLSearchParams()
            const token = this.$token()
            params.append('timeStamp', token[0])
            params.append('token', token[1])
            params.append('type', '')
            newRecord(params)
            .then((response)=> {
                if(response.data.code == "200"){
                    const {data} = response.data
                    if(isEmptyObject(data)){
                        this.noData = true
                        this.mescroll.endErr()
                    }else{
                        // 把请求到的数据添加到列表
                        this.recordList = data
                        // 数据渲染成功后,隐藏下拉刷新的状态
                        this.$nextTick(() => {
                            this.mescroll.endSuccess(data.length)
                        })
                    }
                } else {
                    this.mescroll.endErr()
                    this.$toast(response.data.msg, 2000)
                }
            })
            .catch((error)=> {
                this.mescroll.endErr()
                this.$toast('请求服务失败', 2000)
            });
        },
        // mescroll组件初始化的回调,可获取到mescroll对象
        mescrollInit (mescroll) {
            this.mescroll = mescroll
        },
        // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
        upCallback () {
            this.getRecordList()
        },
        openDetails(data){
            if(!isDefine(this.$store.state.bfUserInfo)){
                this.$router.push('/login')
            }else if(!this.$store.state.bindingName){
                this.$router.push('/bindingName')
            }else{
                this.$router.push({
                    path: '/lotteryHistory',
                    query: {
                        id: data
                    }
                })
            } 
        }
    },
    components: {
        MescrollVue,
        NoData
    }
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
    /*通过fixed固定mescroll的高度*/
    .mescroll
        position: fixed
        top: 2.75rem
        bottom: 0
        height: auto 
    .record-pd
        padding: 1rem .75rem
    .mar-tb
        margin : .5rem 0
</style>

